<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>03-1像素边框问题</title>
    <style>
        .box {
            height: 200px;
            background: #ccc;
            position: relative;
        }

        .box::after {
            content: '';
            height: 1px;
            background-color: red;
            bottom: 0;
            left: 0;
            width: 100%;
            position: absolute;
        }

        @media screen and (-webkit-min-device-pixel-ratio: 2) {
            .box::after {
                transform: scaleY(0.5);
            }
        }

        @media screen and (-webkit-min-device-pixel-ratio: 3) {
            .box::after {
                transform: scaleY(0.333);
            }
        }

        @media screen and (-webkit-min-device-pixel-ratio: 4) {
            .box::after {
                transform: scaleY(0.25);
            }
        }
    </style>
</head>

<body>
    <!-- 
            物理像素（手机出厂的时候就已经确定好了）
                手机屏幕的物理像素点
                以iphone6为例，手机屏幕宽度是375px,是由750个物理像素点组成
            css像素
                代码可以操作的页面大小的单位
                  以iphone6为例，手机屏幕宽度是375px,设置1px的大小，实际占了2个物理像素点
            设备独立像素
                程序中的虚拟单位，可以理解为就是css像素
            设备独立像素比
                设备独立像素比 = 物理像素 / 设备独立像素
                以iphone6为例
                    设备独立像素比 = 750 / 375 = 2
                以iphone6plus为例
                    设备独立像素比 = 1242 / 414 = 3
         -->
    <div class="box"></div>
</body>

</html>